<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: Rotation Plugin Example</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
	<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>
	<script type="text/javascript" src="../src/tweenjs/plugins/RotationPlugin.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	function init() {
		// set up our stage:
		stage = new createjs.Stage("canvas1");

		var arrow = new createjs.Shape();
		arrow.graphics.beginFill("#FF0000").drawRect(0, -2, 100, 4).drawPolyStar(100, 0, 10, 3, 0, 0);
		arrow.x = stage.canvas.width/2;
		arrow.y = stage.canvas.height/2;

		// install the sample plugin:
		createjs.RotationPlugin.install();

		arrow.rotation = 0;
		createjs.Tween.get(arrow, {loop: -1})
			.to({rotation: 270}, 1000)// the default plugin behavior (rotationDir=null) is to use smart rotation, so it goes the short way (CCW 90 deg)
			.wait(500)
			.to({rotation: 0, rotationDir: 0}, 1000)// rotationDir=0 disables smart rotation, so it rotates the long way (CCW 270deg)
			.wait(500)
			.to({rotation: -1, rotationDir: 1}, 1000)// rotationDir=1 makes it rotate CW, even if the shortest route is CCW
			.wait(500)
			.to({rotation: 0, rotationDir: -1}, 1000)// rotationDir=1 makes it rotate CCW
			.wait(500)
			.to({rotation: 1080, rotationDir: 0}, 1000)// setting rotationDir to 0 also lets you rotate more than 360 degrees
			.wait(1000);

		var txt = new createjs.Text("Rotation Plugin", "bold 20px Arial");
		txt.textAlign = "center";
		txt.x = 450;
		txt.y = 30;

		// this tween just updates the text.
		// note that it has ignoreGlobalPause set to true, so it will keep playing even when Ticker is paused.
		createjs.Tween.get(txt, {loop: -1})
				.to({text: "Rotate (shortest distance) to 270"}).wait(1500)
				.to({text: "Rotate (default) to 0"}).wait(1500)
				.to({text: "Rotate (cw) to -1"}).wait(1500)
				.to({text: "Rotate (ccw) to 0"}).wait(1500)
				.to({text: "Rotate (default) to 1080"}).wait(2000)

		stage.addChild(arrow, txt);

		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", stage);
	}
</script>
</head>

<body onload="init();">

<header class="TweenJS">
	<h1>RelativePlugin Example</h1>

	<p>This example shows how the RotationPlugin works, view the source for info.</p>
</header>

<canvas id="canvas1" width="960" height="350"></canvas>
<br/>
<input type="button" value="toggle paused"
	   onclick="createjs.Ticker.paused = !createjs.Ticker.paused;">
</body>
</html>
